<template>
  <div class="register">
    <div class="titel">注册页面</div>
    <div><input type="text" placeholder="请输入电话号码" class="input" v-model="formData.phone"></div>
    <div><input type="password" placeholder="请输你的密码" class="input" v-model="formData.pass"></div>
    <div><input type="password" placeholder="请输你的密码" class="input" v-model="formData.checkpass"></div>
    <div><input type="button" value="注册" class="btn" @click="register()"></div>
  </div>
</template>

<script>
import { user_register } from '../utils/api'
export default {
    data() {
        return {
            formData:{
                phone:'',
                pass:'',
                checkpass:''
            },
        }
    },
    methods: {
        register(){
            if(/^1[\d]{10}$/.test(this.formData.phone) != true){
                alert('你输入的号码不正确');
            }else if(this.formData.pass == '' ||this.formData.checkpass == ''){
                alert('请输入你的密码/或确认密码');
            }else if(this.formData.pass  !== this.formData.checkpass){
                alert('确认密码与原密码不相等');
            }else{
                // 验证成功
                // 将formData进行生拷贝（不然会直接影响响应式数据）
                var newformData =JSON.parse(JSON.stringify(this.formData))
                // 我们只需要phone和pass（不需要再次输入的确认密码）
                delete newformData.checkpass;

                // 发送注册请求
                user_register(newformData).then((res)=>{
                    if(res.data.code == 200){
                        alert('注册成功');
                        // 跳转到首页通过$router.push
                        this.$router.push('/login')

                    }else{
                        alert(res.data.msg)
                    }
                });
            }
        }
    },
}
</script>

<style scoped>
*{
    margin: 0;padding: 0;
}
    .register{
        width: 100%;
        height: 100%;
        text-align: center;
        /* padding: 10px; */
    }
    .titel{
        font-weight: bold;
        margin: 10px 0;
    }
    .register input{
        width: 90%;
        /* height: 30px; */
        padding: 5px 10px;
        line-height: 30px;
        border-radius: 10px;
        margin: 10px 0;
    }
    .btn{
        background-color: lightskyblue;
    }
</style>